<section class="main-box" [ngStyle]="tagData.cssStyle|styleFilter">
  <div class="top-box" [ngStyle]="tagData.data.topBoxCssStyle|styleFilter">
    <div class="left-box" [ngStyle]="tagData?.data?.aiLeftBoxCssStyle|styleFilter">
      <ng-container *ngIf="tagData?.data?.aiWrapCssStyle!==undefined; else aiWrapTemplate">
        <div class="ai_wrap1" id="ai_wrap{{circleId}}" [ngStyle]="tagData?.data?.aiWrapCssStyle|styleFilter">
          <div class="ai_circle1" id="ai_circle{{circleId}}" [ngStyle]="tagData?.data?.aiCircleCssStyle|styleFilter">
            <div class="percent1 ai_left" [ngStyle]="tagData?.data?.aiLeftCssStyle|styleFilter"
              id="ai_left{{circleId}}">
            </div>
            <div class="percent1 ai_right wth0" [ngStyle]="tagData?.data?.aiRightCssStyle|styleFilter"
              id="ai_right{{circleId}}"></div>
          </div>
          <div class="ai_num" [ngStyle]="tagData?.data?.aiNumCssStyle|styleFilter">
            <div class="numFirstBox" [ngStyle]="tagData?.data?.numFirstBoxCssStyle|styleFilter">
              <div class="numSecondBox" [ngStyle]="tagData?.data?.numSecondBoxCssStyle|styleFilter">
                <span id="ai_num{{circleId}}" [ngStyle]="tagData?.data?.aiNum1CssStyle|styleFilter">0</span>%
              </div>
              <span class="aiNumLabel" id="ai_numLabel{{circleId}}"
                [ngStyle]="tagData?.data?.aiNumLabelCssStyle|styleFilter">{{tagData?.data?.aiNumLabel}}</span>
            </div>
          </div>
        </div>
      </ng-container>
      <ng-template #aiWrapTemplate>
        <div class="ai_wrap" id="ai_wrap{{circleId}}" [ngStyle]="tagData?.data?.aiWrapCssStyle|styleFilter">
          <div class="ai_circle" id="ai_circle{{circleId}}" [ngStyle]="tagData?.data?.aiCircleCssStyle|styleFilter">
            <div class="percent ai_left" [ngStyle]="tagData?.data?.aiLeftCssStyle|styleFilter" id="ai_left{{circleId}}">
            </div>
            <div class="percent ai_right wth0" [ngStyle]="tagData?.data?.aiRightCssStyle|styleFilter"
              id="ai_right{{circleId}}"></div>
          </div>
          <div class="ai_num" [ngStyle]="tagData?.data?.aiNumCssStyle|styleFilter">
            <span id="ai_num{{circleId}}" [ngStyle]="tagData?.data?.aiNum1CssStyle|styleFilter">0</span>%
          </div>
        </div>
      </ng-template>
    </div>
    <div class="right-box" [ngStyle]="tagData.data?.rightBoxCssStyle|styleFilter">
      <p class="left-title" *ngIf="tagData.data.title" [ngStyle]="tagData.data.title?.leftCssStyle|styleFilter">
        {{tagData.data.title?.left}}
        <span class="right-title" *ngIf="tagData.data.title.right"
          [ngStyle]="tagData.data.title?.rightCssStyle|styleFilter">
          {{tagData.data.title?.right}}</span>
      </p>
      <p class="explain" *ngIf="tagData.data.explain" [ngStyle]="tagData.data.explainCssStyle|styleFilter">
        {{tagData.data.explain}}</p>
      <p class="icon-box" [ngStyle]="tagData.data.iconBoxCssStyle|styleFilter">
        <ng-container *ngFor="let item of tagData.data.honor">
          <span class="item-bg" [ngStyle]="item.cssStyle|styleFilter">
            <img class="icon-item" *ngIf="item.icon" [src]="item.icon"
              onerror="this.src='assets/fw/assets/fw/shop_star@3x.png'" />
            <span [ngStyle]="item.labelCssStyle | styleFilter">{{item.label}}</span>
          </span>

        </ng-container>
      </p>
    </div>
  </div>
  <div class="button-box" *ngIf="tagData.data.buttonLink" [ngStyle]="tagData.data.buttonBoxCssStyle|styleFilter">
    <ng-container *ngFor="let button of tagData.data.buttonLink">
      <span class="button" *ngIf="button.link?.label" [ngStyle]="button.link?.params?.cssStyle|styleFilter"
        appDebounceClick (debounceClick)="goToPage(button.link,button)">{{button.link?.label}}</span>
    </ng-container>
  </div>
  <!-- 推荐分享 -->
  <div class="box-share" *ngIf="tagData.data?.firstshareData" [ngStyle]="tagData.data?.boxShareCssStyle|styleFilter">
    <div class="box-share-div 1" [ngStyle]="tagData.data?.boxShareDivCssStyle|styleFilter">
      <div class="border" *ngIf="tagData.data?.borderIsHidden === undefined"></div>
      <div class="box-share-label" [ngStyle]="tagData.data?.firstlabelCssStyle|styleFilter">
        {{tagData.data?.firstlabel}}
        <div
          *ngIf="tagData.data?.firstshareData&&tagData.data?.firstshareData[0]&&tagData.data?.firstshareData[0]?.rightLabelIcon"
          appDebounceClick
          (debounceClick)="gotoPage(tagData.data?.learnData&&tagData.data?.learnData[0]&&tagData.data?.learnData[0]?.link)">
          <img class="rightLabelIcon" *ngIf="tagData.data?.firstshareData[0]?.rightLabelIcon"
            [src]="tagData.data?.firstshareData[0]?.rightLabelIcon"
            onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_170313801792016289745a2113fb7b99e24ab7549c6f9.png'"
            [ngStyle]="tagData.data?.firstshareData[0]?.rightLabelIconCssStyle|styleFilter" />
          <span class="rightLabel" *ngIf="tagData.data?.firstshareData[0]?.rightLabel"
            [ngStyle]="tagData.data?.firstshareData[0]?.rightLabelCssStyle|styleFilter">{{tagData.data?.firstshareData[0]?.rightLabel}}</span>
        </div>
      </div>
      <ng-container *ngFor="let item of tagData.data?.firstshareData">
        <div class="box-share-content 1" appDebounceClick
          (debounceClick)="beforeSubmit(item.beforeSubmit,item.link,$event)" [ngStyle]="item.itemCssStyle|styleFilter">
          <div class="innerLeftDiv" *ngIf="item.innerLeftDivCssStyle" [ngStyle]="item.innerLeftDivCssStyle|styleFilter">
          </div>

          <span class="share-label" [ngStyle]="item.labelCssStyle|styleFilter">
            {{item.label}}
            <span *ngIf="item.value" class="share-value" [ngStyle]="item.valueCssStyle|styleFilter">{{item.value}}</span>
          </span>
          <span class="share-detail" [ngStyle]="item.detailCssStyle|styleFilter">
            {{item.detail}}
          </span>
          <div class="share-icon">
            <img [src]="item.icon" [ngStyle]="item.iconCssStyle|styleFilter" />
          </div>
        </div>
      </ng-container>
    </div>
  </div>
  <!-- 分享店铺 -->
  <div class="box-share" *ngIf="tagData.data?.shareData" [ngStyle]="tagData.data?.boxShareCssStyle|styleFilter">
    <div class="box-share-div 2" [ngStyle]="tagData.data?.boxShareDivCssStyle|styleFilter">
      <div class="border" *ngIf="!tagData.data?.firstshareData && tagData.data.hiddenLine === undefined"></div>
      <div *ngIf="tagData.data?.label" class="box-share-label" [ngStyle]="tagData.data?.labelCssStyle|styleFilter"
        appDebounceClick
        (debounceClick)="goToPage(tagData.data?.learnData&&tagData.data?.learnData[0]&&tagData.data?.learnData[0]?.link)">
        {{tagData.data?.label}}
        <div *ngIf="tagData.data?.shareData&&tagData.data?.shareData[0]&&tagData.data?.shareData[0]?.rightLabelIcon">
          <img class="rightLabelIcon" *ngIf="tagData.data?.shareData[0]?.rightLabelIcon"
            [src]="tagData.data?.shareData[0]?.rightLabelIcon"
            onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_170313801792016289745a2113fb7b99e24ab7549c6f9.png'"
            [ngStyle]="tagData.data?.shareData[0]?.rightLabelIconCssStyle|styleFilter" />
          <span class="rightLabel" *ngIf="tagData.data?.shareData[0]?.rightLabel"
            [ngStyle]="tagData.data?.shareData[0]?.rightLabelCssStyle|styleFilter">{{tagData.data?.shareData[0]?.rightLabel}}</span>
        </div>
      </div>
      <ng-container
        *ngIf="tagData.data?.shareData[0]?.type && tagData.data?.shareData[0]?.type === '2'; else elseTemplate">
        <ng-container *ngFor="let item of tagData.data?.shareData">
          <div class="box-share-content 2 type2" appDebounceClick
            (debounceClick)="beforeSubmit(item.beforeSubmit,item.link,$event)"
            [ngStyle]="item.itemCssStyle|styleFilter">
            <img *ngIf="item.leftIcon" class="share-left-icon" [src]="item.leftIcon"
              [ngStyle]="item.leftIconCssStyle|styleFilter" />
            <div class="innerLeftDiv" *ngIf="item.innerLeftDivCssStyle"
              [ngStyle]="item.innerLeftDivCssStyle|styleFilter">
            </div>
            <span *ngIf="item.label" class="share-label" [ngStyle]="item.labelCssStyle|styleFilter">
              {{item.label}}
              <img *ngIf="item.icon" class="share-icon" [src]="item.icon"[ngStyle]="item.iconCssStyle|styleFilter" />
              <span *ngIf="item.value" class="share-value" [ngStyle]="item.valueCssStyle|styleFilter">{{item.value}}</span>
            </span>
            <span *ngIf="item.detail" class="share-detail" [ngStyle]="item.detailCssStyle|styleFilter">
              {{item.detail}}
            </span>
          </div>
        </ng-container>
      </ng-container>
      <ng-template #elseTemplate>
        <ng-container *ngFor="let item of tagData.data?.shareData">
          <div class="box-share-content 2" appDebounceClick
            (debounceClick)="beforeSubmit(item.beforeSubmit,item.link,$event)"
            [ngStyle]="item.itemCssStyle|styleFilter">
            <img *ngIf="item.leftIcon" class="share-left-icon" [src]="item.leftIcon"
              [ngStyle]="item.leftIconCssStyle|styleFilter" />
            <div class="innerLeftDiv" *ngIf="item.innerLeftDivCssStyle"
              [ngStyle]="item.innerLeftDivCssStyle|styleFilter">
            </div>
            <span *ngIf="item.label" class="share-label" [ngStyle]="item.labelCssStyle|styleFilter">
              {{item.label}}
              <span *ngIf="item.value" class="share-value" [ngStyle]="item.valueCssStyle|styleFilter">{{item.value}}</span>
            </span>
            <span *ngIf="item.detail" class="share-detail" [ngStyle]="item.detailCssStyle|styleFilter">
              {{item.detail}}
            </span>
            <img *ngIf="item.icon" class="share-icon" [src]="item.icon" [ngStyle]="item.iconCssStyle|styleFilter" />
          </div>
        </ng-container>
      </ng-template>


    </div>
  </div>
</section>